<template>
  <div class="area">
    <div class="top">
      <span>北京</span>
      <span>请在这里输入区域/商圈</span>
      <span>地图找房</span>
    </div>
    <div class="nav">
     <span @click="navlink('/pages/home/map/area/index')">区域</span>
      <span @click="navlink('/pages/home/map/price/index')">价格</span>
      <span class="color">户型</span>
      <span @click="navlink('/pages/home/map/distance/index')">筛选</span>
      <span><img src="../../../../static/filter.png" alt="" /></span>
    </div>
    <div class="list">
      <div>
        <dl>
          <dt>买房选型</dt>
          <dd>
            <span
              v-for="(item, index) in mai"
              :key="index"
              @click="biao(index)"
              :class="index == xia ? 'active' : ''"
              >{{ item }}</span
            >
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt>户型</dt>
          <dd>
            <span
              v-for="(item,index) in hu"
              :key="item"
              @click="biao1(index)"
              :class="index == xia1 ? 'active1' : ''"
              >{{ item }}</span
            >
          </dd>
        </dl>
      </div>
    </div>
    <button @click="navlink('/pages/home/House/House')">确定</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: [],
      xia: 0,
      xia1: 0,
      mai: ["不限", "新房", "二手房"],
      hu: ["不限", "1室", "2室", "3室", "3室+"],
    };
  },
  methods: {
    navlink(path) {
      console.log(path);
      wx.navigateTo({
        url: path,
      });
    },
    biao(index) {
      this.xia = index;
    },
    biao1(index) {
      this.xia1 = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.active,
.active1 {
  color: #fff;
  background: #ff9900;
}
.area {
  width: 100%;
  height: 100%;
  .color {
    color: #FFC552;
  }
  .top {
    width: 100%;
    margin-top: 20rpx;
    span:nth-child(1) {
      display: inline-block;
      padding: 20rpx 30rpx;
    }
    span:nth-child(2) {
      width: 400rpx;
      color: #999999;
      border: 1rpx solid #cccccc;
      display: inline-block;
      padding: 10rpx 20rpx;
      background: #f4f4f4;
    }
    span:nth-child(3) {
      margin-left: 50rpx;
    }
  }
  .nav {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #000;
    span {
      flex: 1;
      text-align: center;
    }
    img {
      width: 35rpx;
      height: 35rpx;
    }
  }
  .list {
    width: 90%;
    margin: 0 auto;
    div {
      width: 100%;
      height: 100rpx;
      dl {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        margin-top: 100rpx;
        dd span {
          display: inline-block;
          padding: 15rpx 30rpx;
          border: 1rpx #fbf7f8 solid;
          margin: 10rpx 20rpx;
        }
      }
    }
  }
  button {
    background: #fd5958;
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
  }
}
</style>